<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文本路径</title>
		<style type="text/css">
			svg{stroke: black;fill: none;width:400px;height:400px;border:1px dashed black;}
		</style>
	</head>
	<body>
		<svg>
			<defs>
				<path id="curvepath" d="M30 40 C 50 10,70 10, 120 40 S 150 0, 200 40" style="stroke: transparent;fill: none;"></path>
				<path id="round-corner" d="M250 30 L 300 30 A 30 30 0 0 1 330 60 L 330 110" style="stroke: gray;fill: none;"></path>
				<path id="sharp-corner" d="M 30 110 100 110 100 160" style="stroke: gray;fill: none;"></path>
				<path id="discontinuous" d="M 150 110 A 40 30 0 1 0 230 110 M 250 110 270 140" style="stroke: gray;fill: none;"></path>
			</defs>
			<g style="font-family: Liberation Sans;font-size:10pt" >
				<use xlink:href="#curvepath" />
				<text>
					<textpath xlink:href="#curvepath">
						Following a cubic Bezier curve.
					</textpath>
				</text>
				
				<use xlink:href="#round-corner" />
				<text>
					<textpath xlink:href="#round-corner">Going`round the bend</textpath>
				</text>
				
				<use xlink:href="#sharp-corner" />
				<text>
					<textpath xlink:href="#sharp-corner">Making a quick turn</textpath>
				</text>
				
				<use xlink:href="#discontinuous" />
				<text>
					<textpath xlink:href="#discontinuous">Text along a broken path</textpath>
				</text>
			</g>
		</svg>
		
		<h4>文本的长度和起始位置</h4>
		<svg>
			<defs>
				<path id="short" transform="translate(40,40)" d="M0 0 L 30 0 A 30 30 0 0 1 60 30 L 60 60" style="stroke: gray;fill: none" />
				<path id="long" transform="translate(140,40)" d="M0 0 L 50 0 A 30 30 0 0 1 80 30 L 80 80" style="stroke: gray;fill: none" />
			</defs>
			<g style="font-family: 'Liberation Sans';font-size :12pt">
				<use xlink:href="#short" />
				<text>
					<textpath xlink:href="#short">This text is too long for the path.</textpath>
				</text>
				<use xlink:href="#long" />
				<text style="text-anchor:middle;">
					<textpath xlink:href="#long" startOffset="50%">
						centered
					</textpath>
				</text>
			</g>
		</svg>
		
	</body>
</html>
